<template>
  <div id="app">
    <Shop :lists="lists" @addgouwu="addgouwu"></Shop>
    <div class="parent">
      <h1>父组件</h1>
      <table class="table">
        <thead>
          <tr>
            <td width="100px">图片</td>
            <td width="520px">名称</td>
            <td width="200px">单价</td>
            <td width="150px">数量</td>
            <td width="180px" style="text-align: center">总价</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="item.id">
            <td>
              <img :src="item.img" alt="" width="100px" height="100px" class="img" />
            </td>
            <td style="overflow: hidden" width="520px" height="40px">
              <span class="span">{{ item.title }}</span>
            </td>
            <td width="200px">{{ item.price }}</td>
            <td width="150px">
              <button @click="add(item.num, index)">+</button>
              <input type="text" v-model="item.num" class="inp" />
              <button @click="jian(item.num, index)">-</button>
            </td>
            <td width="180px" style="text-align: center">
              {{ item.sum_item }}
            </td>
          </tr>
        </tbody>
      </table>
      <div>
        <!-- 总价格  sum_item的总和 -->
        <h1>
          总计：<span>{{ sum }}</span>
        </h1>
      </div>
    </div>
  </div>
</template>

<script>
import Shop from "./components/Shop.vue";

export default {
  name: "App",
  data() {
    return {
      info: "父组件",
      list: [],
      lists: [
        {
          id: "1",
          img: "https://img12.360buyimg.com/n7/jfs/t1/176680/38/28171/170639/620f50f5Eecc8972f/2a0794b920feac29.jpg",
          title: "恒源祥长袖衬衫男春季纯棉免烫商务绅士纯色衬衣 藏青 MT003 41",
          pj: "2000+ 条评价",
          num: 0,
          sum_item: 0,
          dp: "恒源祥服饰旗舰店",
          price: "308.00",
        },
        {
          id: "2",
          img: "https://img13.360buyimg.com/n7/jfs/t1/124625/13/16645/1016345/5f9ff056E604673b6/5a5580a9d7390712.png",
          title:
            "富贵鸟夹克男装春秋季新款韩版潮流青年休闲连帽上衣时尚帅气百搭外套服饰",
          pj: "5000+ 条评价",
          dp: "富贵鸟服饰旗舰店",
          num: 0,
          sum_item: 0,
          price: "138.00",
        },
        {
          id: "3",
          img: "https://img12.360buyimg.com/n7/jfs/t1/163792/34/27118/248595/62112ab8E1781a485/68a1ed0caa5d947b.jpg",
          title:
            "吉普JEEP外套男2022春季新款潮流休闲刺绣飞行工装夹克男士可脱卸帽男装联名 卡",
          pj: "47 条评价",
          dp: "jeep德天下专卖店",
          num: 0,
          sum_item: 0,
          price: "188.00",
        },
        {
          id: "4",
          img: "https://img11.360buyimg.com/n7/jfs/t1/141124/16/26232/128114/61da9eacEad09659b/6c3b207238a9caef.jpg",
          title:
            "花花公子夹克男2022春季新款男士工装外衣潮流男装联名帅气休闲棒球服外套男 灰",
          pj: "73 条评价",
          dp: "花花公子庆丰专卖店",
          num: 0,
          sum_item: 0,
          price: "199.00",
        },
        {
          id: "5",
          img: "https://img11.360buyimg.com/n7/jfs/t1/206544/1/6225/143342/616fb155E7a4a0cdd/0a09f408a38913ed.jpg",
          title:
            "花花公子外套男潮流2022春季新款休闲夹克衫商务韩版外衣防风上衣服男装联名",
          pj: "2000+条评价",
          dp: "百耀服饰内衣专营店",
          num: 0,
          sum_item: 0,
          price: "269.00",
        },
      ],
    };
  },
  methods: {
    addgouwu(arrs) {
      this.list.push(arrs);
    },
    add(num, index) {
      this.list[index].num = num*1 + 1;
      this.list[index].sum_item =this.list[index].price * 1 * this.list[index].num * 1;
    },
    jian(num, index) {
      this.list[index].num = num - 1;
      this.list[index].sum_item =
        this.list[index].price * 1 * this.list[index].num * 1;
    },
   
  },
  computed: {
    sum() {
      let result = 0;
      this.list.forEach((element) => {
        result += element.sum_item;
      });
      return result;
    },
  },
  components: {
    Shop,
  },
};
</script>

<style lang="less">
.parent {
  clear: both;
}
.img{
  width: 200px;
  height: 200px;
}
</style>
